﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="SpinEdit#ReadOnly" />Read-Only and Disabled Modes</h2>
    <p>In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1">Spin Edit</a> displays values but does not allow users to change them. To implement this behavior, you can use any of the following modes:</p>
    <ul>
        <li>Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1.ReadOnly">ReadOnly</a> property to <b>true</b> to activate this mode.</li>
        <li>Disabled mode. In this mode, the component cannot be focused or navigated. Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxDataEditorBase-2.Enabled">Enabled</a> property to <b>false</b> to activate this mode.</li>
    </ul>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="The value cannot be changed" />
    </div>
    <div class="card-body mw-480">
        <DxFormLayout ItemSizeMode="SizeMode" @key="@ThemeName">
            <DxFormLayoutItem ColSpanMd="12" Caption="Read Only">
                <Template>
                    <DxSpinEdit @bind-Value="@NumericValue" ReadOnly="true"></DxSpinEdit>
                </Template>
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="12" Caption="Disabled" BeginRow="true">
                <Template>
                    <DxSpinEdit @bind-Value="@NumericValue" Enabled="false"></DxSpinEdit>
                </Template>
            </DxFormLayoutItem>
        </DxFormLayout>
    </div>
</div>

<CodeSnippet_Editor_SpinEdit_ReadOnly />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }

    int? NumericValue { get; set; } = 180798;
}
